<!DOCTYPE html>
<html lang="zh-cn">
	<head>
	    <meta charset="utf-8">
	   	<title>HTML TEMP </title>
	   	<style type="text/css">
	   		body{
	   			margin: 0px;
	   		}
	   		ul.menu1{
	   			list-style: none;
	   			margin: 0px;
	   			padding:0px;

	   		}
	   		ul.menu1 li a{
	   			display: block;
	   			width: 100px;
	   			height: 30px;
	   			/*border-top: solid 1px black;*/
	   			border-left: solid 1px black;
	   			border-right: solid 1px black;
	   			border-bottom: solid 1px black;
	   			text-decoration: none;
	   			line-height: 30px;
	   			color: white;
	   			background-color: red;
	   		}
	   		ul.menu1 li a:hover{
	   			text-decoration: underline;
	   		}

	   		ul.menu2{
	   			list-style: none;
	   			margin: 0px;
	   			padding:0px;

	   		}
	   		ul.menu2 li{
	   			display:block;
	   			float: left;
	   		}
	   		ul.menu2 li a{
	   			display: block;
	   			width: 100px;
	   			height: 30px;
	   			/*border-top: solid 1px black;*/
	   			border-left: solid 1px black;
	   			border-right: solid 1px black;
	   			border-bottom: solid 1px black;
	   			text-decoration: none;
	   			line-height: 30px;
	   			color: white;
	   			background-color: red;
	   		}
	   		ul.menu2 li a:hover{
	   			text-decoration: underline;
	   		}
	   	</style>
	</head>
	<body>
		<ul class="menu1">
			<li><a href="#">Menu Action</a></li>	
			<li><a href="#">Menu Action</a></li>	
			<li><a href="#">Menu Action</a></li>	
			<li><a href="#">Menu Action</a></li>	
			<li><a href="#">Menu Action</a></li>	
		</ul>

		<div style="height:30px;"></div>
		<ul class="menu2">
			<li><a href="#">Menu Action</a></li>	
			<li><a href="#">Menu Action</a></li>	
			<li><a href="#">Menu Action</a></li>	
			<li><a href="#">Menu Action</a></li>	
			<li><a href="#">Menu Action</a></li>	
		</ul>

	</body>
</html>